<template>
  <div id="start-page" v-if="!isShow">
    <div class="picUp">
        <img :src="imgSrc1" alt="">
    </div>
    <div class="picCenter">
        <transition 
         appear
         name="animate__animated animate__bounce"
         enter-active-class="animate__bounceIn"
         leave-active-class="animate__bounceOut"
        >
            <img :src="imgSrc2" alt="">
        </transition>
    </div>
    <div class="picDown fixClear">
        <img :src="imgSrc3" alt="">
        <span>极具匠心 传承经典</span>
    </div>
  </div>
</template>

<script>
import 'animate.css'
export default {
  name: 'StartPage',
  props: {
      path: String,
  },
  data() {
      return {
          count: 0,
          isShow: false,
          timer: null,
          imgSrc1: require('../../assets/img/startpage/launch page_icon_cancel@2x.png'),
          imgSrc2: require('../../assets/img/startpage/launch page_logo big@2x.png'),
          imgSrc3: require('../../assets/img/startpage/launch page_logo small@2x.png'),
      }
  },
  mounted() {
    //   this.$router.onReady(() => {
    //     console.log(this.$route);
    //   })
    // console.log(this.$route);
    this.threeTimesGo();
    // console.log(this.$route.path);
    // console.log(this.path);
  },
  methods: {
      threeTimesGo() {
        //   const currentCnt = 3;
        //   if(!this.timer){
        //       this.count = currentCnt;
        //       this.timer = setInterval(() => {
        //           if(this.count >= 0 && this.count < currentCnt){
        //               this.count --;
        //           }else{
        //               this.isShow = !this.isShow;
        //               clearInterval(this.timer);
        //               this.timer = null;
        //               this.$router.push(this.path);
        //           }
        //       },2000);
        //   }
        setTimeout(() => {
            this.$router.push('/login')
        }, 3000);
      }

  }
}
</script>

<style scoped>
    /* body{
        background-color: #1B7373;
    } */
    #start-page{
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: #1B7373;

    }
    .picUp{
        margin: 11px 0 0 34px;
        cursor: pointer;
    }
    .picUp img {
        width: 24px;
        height: 24px;
    }
    .picCenter{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .picCenter img{
        width: 187px;
        height: 81px;
    }
    .picDown{
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        bottom: 48px;
        width: 213px;
        height: 36.25px;
        line-height: 36.25px;
    }
    .picDown img {
        float: left;
        width: 36px;
        height: 36.25px;
    }
    .picDown span{
        float: right;
        display: block;
        font-size: 20px;
        font-weight: 200;
        color: #FFFFFF;
    }
</style>